<template>
    <div>
        <div class="tab">
            <div v-for="(item,index) in tabList" :key="index" :class="{divs:num==index}" @click="tab(index)">
                {{item.name}}
            </div>
        </div>
        <div :style="`${num==0?'display: block;':'display: none;'}`">1</div>
        <div :style="`${num==1?'display: block;':'display: none;'}`">2</div>
        <div :style="`${num==2?'display: block;':'display: none;'}`">3</div>
    </div>
</template>

<script>
export default {
    props: ['tabList'],
    data() {
        return {
            num: 0
        }
    },
    methods: {
        tab(v) {
            this.num = v
        }
    }
}
</script>

<style lang="scss" scoped>
.tab {
    width: 100%;
    height: 1rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    >div {
        height: 100%;
        padding: 0 0.1rem;
        display: flex;
        align-items: center;
    }

    .divs {
        border-bottom: 3px solid #eb6100;
        color: #eb6100;
    }
}
</style>